<template>
  <div class="page">
    <el-dialog
      :title="title"
      :visible.sync="status"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
      center
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="6" class="text-center">
            <el-form-item label="证件资质" prop="licenseimg">
              <upLoadImg
                :floder="7"
                :url.sync="ruleForm.licenseimg"
                :showFileList="false"
              ></upLoadImg>
              <div class="text-center color-999">营业执照</div>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1" class="text-center">
            <el-form-item prop="legalfaceimg">
              <upLoadImg
                :floder="7"
                :url.sync="ruleForm.legalfaceimg"
                :showFileList="false"
              ></upLoadImg>
              <div class="text-center color-999">身份证正面</div>
            </el-form-item>
          </el-col>

          <el-col :span="6" :offset="1" class="text-center">
            <el-form-item prop="legalbackimg">
              <upLoadImg
                :floder="7"
                :url.sync="ruleForm.legalbackimg"
                :showFileList="false"
              ></upLoadImg>
              <div class="text-center color-999">身份证反面</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="企业全称" prop="name">
          <el-input v-model="ruleForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="企业法人" prop="legalname">
          <el-input v-model="ruleForm.legalname" clearable></el-input>
        </el-form-item>
        <el-form-item label="法人电话" prop="legalmobile">
          <el-input v-model="ruleForm.legalmobile" clearable></el-input>
        </el-form-item>
        <el-form-item label="地    址" prop="address">
          <el-input v-model="ruleForm.address" clearable></el-input>
        </el-form-item>

        <el-form-item label="授权地区" prop="authority_cityid">
          <selectCity
            type="2"
            @changeCity="changeCity"
            :cityVal="[
              ruleForm.authority_provinceid,
              ruleForm.authority_cityid,
            ]"
          ></selectCity>
        </el-form-item>
        <el-form-item label="我是法人">
          <el-switch
            v-model="ruleForm.islegal"
            active-color="#13ce66"
            inactive-color="#f5f6f7"
          >
          </el-switch>
        </el-form-item>

        <el-form-item label="负责人" prop="principalname">
          <el-input
            v-model="ruleForm.principalname"
            clearable
            :disabled="isdisabla"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="ID账号" prop="principalmobile">
              <el-input
                v-model="ruleForm.principalmobile"
                clearable
                placeholder="请输入手机号"
                :disabled="isdisabla"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="登录密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                disabled
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!ruleForm.islegal">
          <el-col :span="6" :offset="1" class="text-center">
            <el-form-item
              :prop="!ruleForm.islegal ? 'principalfaceimg' : ''"
              label="身份认证"
            >
              <upLoadImg
                :floder="7"
                :url.sync="ruleForm.principalfaceimg"
                :showFileList="false"
              ></upLoadImg>
              <div class="text-center color-999">身份证正面</div>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1" class="text-center">
            <el-form-item :prop="!ruleForm.islegal ? 'principalbackimg' : ''">
              <upLoadImg
                :floder="7"
                :url.sync="ruleForm.principalbackimg"
                :showFileList="false"
              ></upLoadImg>
              <div class="text-center color-999">身份证反面</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-row justify="center">
            <el-col :span="24" class="text-center">
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
                v-loading.fullscreen.lock="fullscreenLoading"
                >立即提交</el-button
              >
              <!-- <el-button @click="restForm('ruleForm')">重置</el-button> -->
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import selectCity from "@/components/selectCity.vue";
import upLoadImg from "@/components/uploadImg.vue";
import { number } from "echarts/lib/export";
export default {
  components: { selectCity, upLoadImg },
  data() {
    return {
      // status: false,
      fullscreenLoading: false,
      title: "新增合伙人",
      ruleForm: {
        name: "",
        address: "",
        legalname: "",
        legalmobile: "",
        licenseimg: "",
        islegal: true,
        legalfaceimg: "",
        legalbackimg: "",
        authority_provinceid: "",
        authority_cityid: "",
        principalname: "",
        principalmobile: "",
        principalfaceimg: "",
        principalbackimg: "",
        password: "123456",
      },

      rules: {
        name: [{ required: true, message: "请输入企业全称", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        legalname: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        legalmobile: [
          { required: true, message: "请输入法人电话", trigger: "blur" },
          { max: 11, min: 11, message: "请输入11位号码" },
          { pattern: /^[0-9]+$/, message: "请输入数字" },
        ],
        authority_cityid: [
          { required: true, message: "请选择授权区域", trigger: "change" },
        ],
        licenseimg: [
          { required: true, message: "请上传营业执照", trigger: "blur" },
        ],
        legalfaceimg: [
          { required: true, message: "请上传身份证正面", trigger: "blur" },
        ],
        legalbackimg: [
          { required: true, message: "请上传身份证反面", trigger: "change" },
        ],
        principalname: [
          { required: true, message: "请输入负责人姓名", trigger: "change" },
        ],
        principalmobile: [
          { required: true, message: "请输入负责人手机号", trigger: "change" },
          { max: 11, min: 11, message: "请输入11位号码" },
          { pattern: /^[0-9]+$/, message: "请输入数字" },
        ],
        principalfaceimg: [
          { required: true, message: "请上传身份证正面", trigger: "blur" },
        ],
        principalbackimg: [
          { required: true, message: "请上传身份证正面", trigger: "blur" },
        ],

        password: [
          // { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      uploadData: { host: "" }, //又拍云请求配置
      isdisabla: true,
    };
  },
  props: ["status", "editObj"],
  created() {},
  watch: {
    "ruleForm.islegal"(val) {
      // console.log(val);
      if (val) {
        this.ruleForm.principalname = this.ruleForm.legalname;
        this.ruleForm.principalmobile = this.ruleForm.legalmobile;
        this.isdisabla = true;
      } else {
        this.isdisabla = false;
      }
    },
    "ruleForm.legalname"(val) {
      // console.log(val);
      if (this.ruleForm.islegal) {
        this.ruleForm.principalname = this.ruleForm.legalname;
      }
    },
    "ruleForm.legalmobile"(val) {
      // console.log(val);
      if (this.ruleForm.islegal) {
        this.ruleForm.principalmobile = this.ruleForm.legalmobile;
      }
    },
    "ruleForm.licenseimg"(val) {
      if (val) {
        this.readLicense(val);
      }
    },
    editObj(val) {
      console.log(val, this.ruleForm);
      if (val.legalname) {
        this.ruleForm = JSON.parse(JSON.stringify(val));
        this.title = "修改合伙人信息";
      } else {
        this.title = "新增合伙人";

        // this.restForm("ruleForm");
      }
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   console.log(this.editObj);
    //   this.ruleForm = this.editObj;
    // });
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((res) => {
          this.$emit("update:status", false);
          this.$nextTick(() => {
            this.restForm("ruleForm");
          });
          // done();
        })
        .catch((_) => {});
    },
    changeCity(val) {
      this.ruleForm.authority_provinceid = val[0];
      this.ruleForm.authority_cityid = val[1];
    },
    restForm(refname) {
      this.$refs[refname].resetFields();
    },
    // 新增修改
    submitForm() {
      // console.log(this.ruleForm);
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          return false;
        } else {
          this.fullscreenLoading = true;
          let _this = this;
          // console.log(this.editObj,this.editObj.legalname,this.editObj.legalname !='' && this.editObj.legalname !=null  && this.editObj.legalname !=undefined )
          let promise = this.editObj.legalname
            ? this.$api.washCarUser.EditAdminLeageStore(this.ruleForm)
            : this.$api.washCarUser.OpenStoreAndCompany(this.ruleForm);
          promise
            .then((res) => {
              console.log(res);
              // if (res.code === 200) {
              this.fullscreenLoading = false;
              this.$message({
                message: this.editObj.legalname ? "修改成功" : "新增成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.$emit("update:status", false);
                this.$emit("getCompanyName", this.ruleForm.name);
                this.$nextTick(() => {
                  this.restForm("ruleForm");
                });
              }, 1500);
              // }
            })
            .catch((err) => {
              this.fullscreenLoading = false;
              console.log(err);
            });
        }
      });
    },
    //图片读取
    async readLicense(imgurl) {
      try {
        const res = await this.$api.washCarUser.CheckBusinessLicense({
          licenseimg: imgurl,
        });
        console.log(res);
        this.ruleForm.name = res.data.name;
        this.ruleForm.address = res.data.address;
        this.ruleForm.legalname = res.data.person;
      } catch (e) {
        //TODO handle the exception
      }
    },
  },
};
</script>

<style scoped >
</style>
